<template>
    <el-form ref="queryForm" :inline="true" class="demo-form-inline">
      <el-form-item label="员工">
        <el-input v-model="queryForm.empName" placeholder="输入员工名" clearable />
      </el-form-item>
      <el-form-item label="部门">
        <el-select
          v-model="queryForm.deptNo"
          placeholder="输入部门"
          clearable
        >
          <el-option v-for="item in deptlist" :label="item.deptName" :value="item.deptNo" />
        </el-select>
      </el-form-item>
     ,
      <el-form-item>
        <el-button type="primary" @click="query">Query</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="emplist" style="width: 100%">
      <el-table-column prop="empNo" label="员工号" width="150" />
      <el-table-column prop="empName" label="员工名" width="120" />
      <el-table-column prop="deptNo" label="部门名" width="120" >
        <template #default="scope">
        <div style="display: flex; align-items: center">
          <!-- <el-icon><timer /></el-icon> -->
          <span style="margin-left: 10px">{{ 
          deptlist.filter(item => item.deptNo == scope.row.deptNo )[0] == null ? "":
          deptlist.filter(item => item.deptNo == scope.row.deptNo )[0].deptName
          
          }}</span>
        </div>
      </template>
      </el-table-column>
      <el-table-column prop="job" label="工作" width="120" />
      <el-table-column prop="birthday" label="生日" width="120" />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="gender" label="性别" width="120" />
      
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleEdite(scope.$index, scope.row)"
            >更新</el-button
          >
          <el-button link type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :small="small"
      :background="background"
      layout="sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  <el-dialog v-model="dialogFormVisible" title="Shipping address">
    <el-form :model="form">
      <el-form-item label="员工名" :label-width="formLabelWidth">
        <el-input v-model="form.empName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="部门">
        <el-select
          v-model="form.deptNo"
          placeholder="输入部门"
          clearable
        >
          <el-option v-for="item in deptlist" :label="item.deptName" :value="item.deptNo" />
        </el-select>
      </el-form-item>
      <el-form-item label="性别" >
        <el-select
          v-model="form.gender"
          clearable
        >
          <el-option label="男" value="男"  />
          <el-option label="女" value="女"  />
        </el-select>
      </el-form-item>
      <el-form-item label="日期" >
        <el-date-picker
          v-model="form.birthday"
          type="date"
          placeholder="选择生日"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :size="size"
        />
      </el-form-item>
   
      <el-form-item label="工作" >
        <el-input v-model="form.job" />
      </el-form-item>
      <el-form-item label="电话" >
        <el-input v-model="form.phone" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handlerSubmit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  </template>
<script>

import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
    name: 'EmpSearch',
    data() {
        return {
          total: 0,
            queryForm: {
                empName: "",
                deptno: null,
                pageNum: 1,
                pageSize: 10,
            },
            form: {
              empName: "",
              deptno: null
            },
            deptlist:[],
            emplist: [],
            dialogFormVisible: false,
        }
    },
    created() {
      // vue数据对象准备好后的回调，钩子函数
      // this.deptlist = [{deptNo: 1, deptName: '部门1'},
      //  {deptNo: 2, deptName: '部门2'}, 
      //  {deptNo: 3, deptName: '部门3'}, 
      //  {deptNo: 4, deptName: '部门4'}]

      axios.get("api/allDept.action", null).then(r => {
        this.deptlist = r.data.data
      })

      // 调用查询方法
      this.query()


    }, 
    methods: {
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.query()
      },
      handleCurrentChange(val) {

        this.queryForm.pageNum = val
        this.query()
      },
      handleEdite(index, row)  {
        this.dialogFormVisible = true

        this.form = row

      },
      handleDelete(index, row) {
        

        // this.emplist = this.emplist.filter(item => item.empNo != row.empNo)
        // axios.delete("api/" + row.empNo + "/emp.action")
        axios.delete(`api/${row.empNo}/emp.action`, null).then(r => {
          ElMessage.success(r.data.message)
          this.query()
        })
         
      },
      query() {
        axios.get("/api/emp.action", {params: this.queryForm}).then(r => {
          this.emplist = r.data.data.list
          this.total = r.data.data.total

        })
        
      },
      handlerSubmit() {

        debugger
        axios.put("api/emp.action", this.form).then(r => {
          ElMessage.success(r.data.message)
          this.dialogFormVisible = false
        })



      }
    }
}
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
</style>